<template>
  <div id="collection">
      <div class="collection">
          <ul id="ListUL">
               <li   class="litag" :class="{'active':select== idx}" v-for = "(item,idx) in data">
                  <div class="name" @click="showCollect(idx)">
                      {{ item.name }}
                      <i :style= "'background-image: url('+$qiniu.url+'assets/img/jianshen.png)'"  class="xiaosanjiao"></i>
                  </div>
                  <div class="content-wrapper">
                      <ContentEchart :LISTEchart="item.correct" :rightNum='item.rightNum' :rightarr = "item.maxs" :idx = "idx"></ContentEchart>
                      <div class="comparewrapper">
                          <div class="rightVideo">
                               <!--<div class="rVideowrapper">-->
                                    <div class="videoWrap">
                                        <video class="video"  @click="playVideo" :poster="$qiniu.url+'assets/img/videowrapper.png'">
                                            <source :src='item.action.url'>
                                        </video>
                                    </div>
                               <!--</div>-->
                                <div  class="img" :style= "'background-image: url('+$qiniu.url+'assets/img/play.png)'" @click="play" ></div>
                                <p>标准动作</p>
                          </div>
                          <div class="errVideo" v-if = "item.errorGifs.length == 0"><span class="none">暂无错误视频</span></div>
                          <div class="errVideo" v-if = "item.errorGifs.length == 1">
                                <img class = "one" :src="item.errorGifs[0].url">
                                <p>错误原因：手臂抬过高</p>
                          </div>
                          <div class="errVideo" v-if = "item.errorGifs.length > 1" >
                                <mt-swipe :show-indicators="false" :auto="10000"  :prevent = "true">
                                    <mt-swipe-item v-for = "item1 in item.errorGifs" :key="item1.url">
                                        <img class = "one" :src="item1.url">
                                        <p>{{ item1.des }}</p>
                                    </mt-swipe-item>
                                </mt-swipe>
                          </div>
                      </div>
                  </div>
             </li>
          </ul>
      </div>
      <Loading v-if="LoadingShow"></Loading>
  </div>
</template>
<script>
    import {
        errFun
    } from '../../tools.js';
    // import api from "../../api";
    import Loading from '../loading.vue';
    import ContentEchart from "./result-analechart.vue";
    import {
        Swipe,
        SwipeItem
    } from 'mint-ui';
    import 'mint-ui/lib/Swipe/style.css';
    export default {
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            showPlay() {
                var target = event.target;
                var list = target.parentNode;
                var video = list.querySelector("video");
                var img = list.querySelector(".img");
                if (video.paused) {
                    img.style.display = "block";
                } else {
                    img.style.display = "none";
                }
            },
        },
        data() {
            return {
                select: 1,
                data: [],
                showSelect: 0,
            }
        },
        props: ["isSelect"],
        methods: {
            //判断是安卓还是IOS
            isAndroid() {
                var agent = navigator.userAgent.toLowerCase();
                var version;
                if (agent.indexOf("like mac os x") > 0) {
                    //是IOS
                    var regStr_saf = /os [\d._]*/gi;
                    var verinfo = agent.match(regStr_saf);
                    version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
                    version = version.substring(0, 2);
                    //大于8的版本
                    if (version >= 10) {
                        return true;
                    }
                } else {
                    return false;
                }
            },
            noshow() {
                event.stopPropagation();
            },

            showCollect(i) {
                // this.$store.dispatch('CHANGE_LOADING_SHOW');
                event.stopPropagation;
                this.select = i;
                // //首先找到当前元素
                var list = document.querySelectorAll(".litag");
                var xiaosanjiaos = document.querySelectorAll(".xiaosanjiao");
                var target = event.target; //是time
                if (target.nodeName == "DIV") {
                    target = target;
                } else {
                    target = target.parentNode;
                }
                var that = target.parentNode; //是li标签
                this.select = i;
                var id = i;
                var selfThat = this;
                var curVideo = document.querySelectorAll(".rightVideo");
                var oldH = target.offsetHeight; //获取一个不变的值
                var newH = that.children[1].offsetHeight + oldH;
                var video = document.querySelectorAll(".rightVideo video");
                for (var i = 0; i < list.length; i++) {
                    list[i].style.height = oldH + "px";
                    xiaosanjiaos[i].classList.remove("show");
                    video[i].style.display = "none";

                }

                if (that.offsetHeight == oldH) {
                    list[id].style.height = newH + "px";
                    xiaosanjiaos[id].classList.add("show");
                    video[id].style.display = "block";
                } else {
                    list[id].style.height = oldH + "px";
                    xiaosanjiaos[id].classList.remove("show");
                    // selfThat.$router.push(selfThat.$route.path);
                    //需要移除整个video标签
                    video[id].style.display = "none";
                }
            },
            //获取数据
            // getAnal() {
            //     var that = this;
            //     // that.$store.dispatch('CHANGE_LOADING_SHOW');
            //     if (that.$route.params.name == 'jianshen') {
            //         api.getResult(this.$route.params.id).then(function(result) {
            //             that.data = result.data.result.dataAnalyses;
            //             return;
            //             // that.$store.dispatch('HIDDEN_LOADING_SHOW');
            //         })
            //     } else {
            //         api.getResultBY(this.$route.params.id).then(function(result) {
            //             that.data = result.data.result.dataAnalyses;
            //             // that.$store.dispatch('HIDDEN_LOADING_SHOW');
            //         })
            //     }
            // },
            //展开第一个li
            // openFirst() {
            //     var that = this;
            //     //默认需要将第一个展开
            //     var list = document.querySelectorAll(".litag");
            //     var xiaosanjiaos = document.querySelectorAll(".xiaosanjiao");
            //     //var target = list[0].target; //是time
            //     var thatL = list[0]; //是li标签
            //     // var oldH, newH;
            //     var oldH = list[0].children[0].offsetHeight; //获取一个不变的值
            //     var newH = thatL.children[1].offsetHeight + oldH;
            //     if (thatL.offsetHeight == oldH) {
            //         list[0].style.height = newH + "px";
            //         xiaosanjiaos[0].classList.add("show");
            //     } else {
            //         list[0].style.height = oldH + "px";
            //         xiaosanjiaos[0].classList.remove("show");
            //     }
            // },
            //播放按钮
            play() {
                // if (this.isAndroid()) {
                var target = event.target;
                var video = target.parentNode.children[0].children[0];
                if (this.isAndroid()) {
                    target.style.display = "none";
                }
                video.loop = true;
                video.play();
                // console.log(video.error.code)
            },
            playVideo() {
                var video = event.target;
                var target = video.parentNode.parentNode.children[1];
                //首先如果是苹果还是安卓的判断
                if (video.paused) {
                    video.play();
                    if (this.isAndroid()) {
                        target.style.display = "none";
                    }
                } else {
                    video.pause();
                    if (this.isAndroid()) {
                        target.style.display = "block";
                    }
                }

            },
            showPlay() {
                if (event.target.played) {
                    this.showSelect = 1;
                } else {
                    this.showSelect = 0;
                }
            },
            //向页面中插入video标签
            creatVideo() {
                //找到
            }

        },
        mounted() {

            this.$nextTick(function() {

                var that = this;
                // that.openFirst();
                that.isAndroid();
                //获取title
                that.getAnal();
                // that.openFirst();

            })
        },
        components: {
            Loading,
            ContentEchart,
        },
    }
</script>
<style>
    #collection {
        padding-bottom: 50px;
        margin-top: 10px;
        background-color: rgb(50, 55, 77);
        .collection {
            width: 100%;
            padding-left: 15px;
            margin-bottom: 20px;
        }
        .collection ul {
            width: 100%;
        }
        .enlarge-range {
            width: 96%;
            height: 30px;
            padding-left: 15px;
            font-size: 12px;
            color: #fff;
            box-sizing: border-box;
        }
        .enlarge-range .range {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .enlarge-range .range .range-value {
            width: 40%;
            height: 100%;
            background-color: #00bb9c;
        }
        .litag {
            width: 100%;
            height: 51px;
            /*border-bottom: 1px solid #888;*/
            overflow: hidden;
        }
        /*li:nth-child(1) {
            height: auto;
        }*/
        .litag.active {
            transition: all 1s;
        }
        .litag .name {
            width: 100%;
            height: 50px;
            font-size: 15px;
            line-height: 50px;
            color: #fff;
            border-bottom: 1px solid #888;
            position: relative;
        }
        .litag .name i {
            width: 20px;
            height: 20px;
            background-position: -153px 0px;
            background-repeat: no-repeat;
            background-size: 250px 20px;
            position: absolute;
            left: 0;
            top: 0;
            right: -77%;
            bottom: 0;
            margin: auto;
        }
        .litag .name i.show {
            background-position: -200px 2px;
        }
        .litag .content-wrapper {
            width: 100%;
            /*height: 200px;*/
            /*background-color: red;*/
            border-bottom: 1px solid #888;
        }
        .litag .content-wrapper .comparewrapper {
            width: 100%;
            height: 230px;
            padding-top: 20px;
            /*padding-left: 10px;*/
            padding-right: 10px;
            box-sizing: border-box
        }
        .litag .content-wrapper .comparewrapper .rightVideo {
            width: 45%;
            height: 100%;
            float: left;
            padding-left: 0px;
            padding-right: 5px;
            box-sizing: border-box;
            position: relative;
        }
        /*.litag .content-wrapper .comparewrapper .rightVideo videoDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            display: 
        }*/
        /*.litag .content-wrapper .comparewrapper .rightVideo .rVideowrapper {
           
        }*/
        .litag .content-wrapper .comparewrapper .rightVideo .videoWrap {
            width: 100%;
            height: 180px;
            position: relative;
            overflow: hidden;
            /*height: 210px;*/
            /*display: blocl;*/
        }
        .litag .content-wrapper .comparewrapper .rightVideo .videoWrap video {
            width: 100%;
            height: 180px;
        }
        *::-webkit-media-controls {
            opacity: 0;
        }
        *::-webkit-media-controls-start-playback-button {
            display: none!important;
            -webkit-appearance: none;
        }
        *::--webkit-media-controls-play-button {
            display: none!important;
            -webkit-appearance: none;
        }
        *::-webkit-media-controls {
            display: none!important;
            -webkit-appearance: none;
        }
        *::-webkit-media-controls-panel {
            display: none!important;
            -webkit-appearance: none;
            position: relative;
            z-index: -9999;
        }
        .litag .content-wrapper .comparewrapper .rightVideo video .poster {
            width: 100%;
            height: 100%;
            background-position: center;
            -webkit-background-size: contain;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            left: 0;
        }
        .litag .content-wrapper .comparewrapper .rightVideo .img {
            width: 70px;
            height: 70px;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            top: -45px;
            left: -8px;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .litag .content-wrapper .comparewrapper .rightVideo img.show {
            display: block;
        }
        .litag .content-wrapper .comparewrapper .rightVideo p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            display: block;
            color: #fff;
            text-align: center;
            font-size: 13px;
        }
        .litag .content-wrapper .comparewrapper .errVideo {
            width: 45%;
            float: left;
            height: 100%;
            padding-left: 15px;
            padding-right: 10px;
            /*background-color: #def;*/
            box-sizing: border-box;
        }
        .litag .content-wrapper .comparewrapper .errVideo .none {
            display: block;
            width: 100%;
            height: 180px;
            line-height: 180px;
            text-indent: 15px;
            color: #fdb900;
        }
        .litag .content-wrapper .comparewrapper .errVideo .one {
            width: 100%;
            height: 180px;
            padding-left: 13px;
            display: block;
        }
        .litag .content-wrapper .comparewrapper .errVideo p {
            width: 120%;
            height: 30px;
            line-height: 30px;
            display: block;
            color: #fff;
            box-sizing: border-box;
            text-align: center;
            font-size: 13px;
        }
        .litag .content-wrapper .comparewrapper .errVideo mt-swipe-item {
            width: 110px;
            padding-left: 13px;
            margin-right: 5px;
            background-color: red;
        }
        /*.litag .content-wrapper .comparewrapper .errVideo mt-swipe-item .mint-swipe-items-wrap>div {
            width: 70%;
            height: 100%;
        }*/
        .litag .content-wrapper .comparewrapper .errVideo .mint-swipe-indicators {
            bottom: 45px;
        }
        /*控制苹果手机的播放按钮*/
    }
</style>